import React from 'react'
import {message, Modal, Table} from 'antd';
import { Switch } from 'antd';
import { Button } from 'antd';
// import { Modal,Space } from 'antd';
import Axios from "axios";
import DeleteComm from "./../goodsComm/DeleteComm";
import allApi from "../../../api/api.config";

const columns = [
    {
        title: 'ID',
        dataIndex: 'com_id',
    },
    {
        title: '用户名称',
        dataIndex: 'user_username',
    },
    {
        title: '评论内容',
        dataIndex: 'com_content',
    },
    {
        title: '评论时间',
        dataIndex: 'com_condate',
    },
    {
        title: '推荐',
        dataIndex: 'com_recd',
    },
    {
        title: '状态',
        dataIndex: 'com_state',
    },
    {
        title: '操作',
        dataIndex: 'Operate',
    },
];

class GoodsManageTable extends React.Component {
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    constructor(props) {
        super(props);
        this.state = {first:true}
    }

    componentDidMount(e) {
        Axios.post("api/goods/goodsComm",{
            // com_id:e.com_id,
            // user_username:e.user_username,
            // com_content:e.com_content,
            // com_condate:e.com_condate,
            // com_recd:e.com_recd,
            // com_state:e.com_state,
        }).then((res)=>{
            if (res.data.code===200){
                this.setState({
                    // data:res.data.data,
                    first:false
                })
            }else{
                this.error('加载出错')
                this.setState({
                    // data:res.data.data,
                    first:false
                })
            }
        }).catch((err)=>{
            console.log(err);
            this.setState({
                // data:res.data.data,
                first:false
            })
        })
    }

    state = { visible: false };

    showModal = () => {
        this.setState({
            visible: true,
        });
    };

    //删除
    handleOk = e => {
        console.log(e);
        message.success('删除成功');
        this.setState({
            visible: false,
        });
        Axios.post(allApi.goodsApi.deleteComm,{
            id:e.id,
        }).then((res)=> {
            if(res.data.code===200) {
                this.success('删除成功')
            }else {
                this.error('加载出错,请联系管理员')
            }
        }).catch((err)=> {
            console.log(err);
        })
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };

    render() {
        const data = [];
        for (let i = 0; i < 46; i++) {
            data.push({
                key: i,
                com_id: `${i+1}`,
                user_username: `不知道先森 ${i}`,
                com_content: `评论内容：这个水果真心不错，很划算，很甜，下次还会买.......`,
                com_condate: `2020-11-19`,
                com_recd: <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />,
                com_state: <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />,
                Operate: <div>
                    <Button type="primary" ghost onClick={this.showModal}>
                        删除
                    </Button>
                </div>
            });
        }
        const { selectedRowKeys } = this.state;
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
            selections: [
                Table.SELECTION_ALL,
                Table.SELECTION_INVERT,
                {
                    key: 'odd',
                    text: 'Select Odd Row',
                    onSelect: changableRowKeys => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                return false;
                            }
                            return true;
                        });
                        this.setState({ selectedRowKeys: newSelectedRowKeys });
                    },
                },
                {
                    key: 'even',
                    text: 'Select Even Row',
                    onSelect: changableRowKeys => {
                        let newSelectedRowKeys = [];
                        newSelectedRowKeys = changableRowKeys.filter((key, index) => {
                            if (index % 2 !== 0) {
                                return true;
                            }
                            return false;
                        });
                        this.setState({ selectedRowKeys: newSelectedRowKeys });
                    },
                },
            ],
        };
        return (
            <div>
                <Table loading={{spinning:this.state.first}} rowSelection={rowSelection} columns={columns} dataSource={data} />
                <Modal
                    title="删除评论"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    okText="确认"
                    cancelText="取消"
                    width={500}
                >
                    <DeleteComm></DeleteComm>
                </Modal>
            </div>
        )
    }
}
export {GoodsManageTable as default}